import React,{useEffect,useState} from "react";
import request from "@/utils/request";
import {Button, Table } from 'antd';
import moment from 'moment'


function UserList(){
    const [userlist,setUserlist] = useState([])
    useEffect(()=>{
        async function getData(){
          const {data} = await request.get('/user/list')
          console.log('data',data)  
          setUserlist(data.data)
        }
        getData()
    },[])
    
    const columns = [
        {
            title: '#',
            render(text,record,index){
                return index+1
            },
        },
        {
            title: '用户名',
            dataIndex: 'name',
            key:'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key:'age',
        },
        {
            title: '地址',
            dataIndex: 'address',
            key:'address',
        },
        {
            title: '注册时间',
            dataIndex: 'reg_time',
            render(text){
                return moment(text).format('YYYY/MM/DD hh:mm:ss')
            },
        },
        {
            title: '操作',
            dataIndex: 'action',
            render(text,record){
                return (
                    <>
                        <Button type="link">编辑</Button>
                        <Button type="link">删除</Button>
                    </>
                )
            },
        }
    ]
    const rowSelection = {
        onChange(selectedRowKeys){
            console.log(selectedRowKeys)
        }
    }

    return(
        <div>
            <Table
                rowKey='id'
                columns={columns}
                dataSource={userlist}
                rowSelection={rowSelection}
            />
        </div>
    )
}

export default UserList